<template>
	<view class="loginContainer">
		<view class="logo">
			<image src="@/static/image/login/logo.png" />
		</view>

		<view class="header-search-input">
			<view class="searchInput">
				<image src="@/static/image/login/phone.png" class="left" />
				<input v-model="username" type="text" placeholder="请输入账号" placeholder-class="placeholder"
					@input="veri" />
			</view>
			<view class="searchInput">
				<image src="@/static/image/login/lock.png" class="left" />
				<input v-model="password" type="password" placeholder="请输入密码" placeholder-class="placeholder"
					@input="veri" />
			</view>
			<view class="loginMethods">
				<button v-if="sumit" class="login" @click="toLogin">
					登录
				</button>
				<button v-else class="login1" :disabled="true">登录</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		loginByPwd,
		getInfo
	} from "@/api/login.js";
	export default {
		data() {
			return {
				sumit: false,
				show: true,
				username: "", // 测试账号 后期清空
				password: "", // 测试账号 后期清空
				isShow: false,
				method: "h5",
			};
		},
		mounted() {},
		methods: {
			veri() {
				if (this.username.trim() && this.password.trim()) {
					this.sumit = true;
				} else {
					this.sumit = false;
				}
			},
			async toLogin() {
				const {
					username,
					password
				} = this;
				const result = await loginByPwd({
					username,
					password,
				});
				if (result && result.data) {
					console.log("ddd,", result.data?.token);
					uni.setStorageSync("user_token", result.data?.token);
					let userInfo = await getInfo();
					uni.setStorageSync("user_info", userInfo.data);
					uni.switchTab({
						url: "/pages/tabBar/index/index",
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.loginContainer {
		width: 100vw;
		height: 100vh;
		background: url("../../static/image/login/bg.png") no-repeat center top;
		background-size: 100% 100%;
		padding: 0 30rpx;
		box-sizing: border-box;

		.logo {
			padding-top: 200rpx;
			width: 473rpx;
			margin: 0 auto;
			image {
				width: 473rpx;
				height: 82rpx;
				margin-bottom: 109rpx;
			}
		}

		.header-search-input {
			padding: 0 26rpx;

			.searchInput {
				position: relative;
				height: 100rpx;
				width: 578rpx;
				border-radius: 51rpx;
				border: 1rpx solid #fff;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				background: rgba(255, 255, 255, 0.3);

				.left {
					position: absolute;
					left: 30rpx;
					top: 35rpx;
					width: 38rpx;
					height: 38rpx;
				}

				input {
					font-size: 28rpx;
					margin-left: 50rpx;
					padding-left: 20rpx;
					height: 56rpx;
					color: #fff;
				}

				.placeholder {
					font-size: 28rpx;
					color: #fff;
				}
			}
		}

		.loginMethods {
			padding-top: 60rpx;
			font-size: 30rpx;

			.login {
				width: 638rpx;
				height: 100rpx;
				background: #2e73ea;
				border-radius: 51rpx;
				line-height: 100rpx;
				color: #fff;
				border: none;
			}

			.login::after {
				border: none;
			}

			.login1 {
				width: 638rpx;
				height: 100rpx;
				background: #2e73ea;
				border-radius: 51rpx;
				line-height: 100rpx;
				color: #fff;
				border: none;
				opacity: 0.5;
			}

			.login1::after {
				border: none;
			}
		}

		.wxlogin {
			padding-top: 24rpx;
			margin: 0 auto;
			width: 38rpx;
			text-align: center;

			img {
				width: 38rpx;
				height: 38rpx;
			}

			span {
				font-size: 24rpx;
				color: #8b8b8b;
			}
		}
	}
</style>
